<template>
  <div class="t-tree">
    <div class="custom-tree-container">
      <div class="block">
        <p>使用 scoped slot</p>
        <el-tree
          @check-change="leftCheckChange"
          :data="data"
          show-checkbox
          node-key="id"
          default-expand-all
          :expand-on-click-node="false"
        >
          <div class="action-group" slot-scope="{ data }">
            <div class="action-text" :style="{width:((4-data.lv)*18+300)+'px'}">{{ data.label }}</div>
            <div class="action-item">
              <el-checkbox
                v-for="item in data.actions"
                :key="item.value"
                v-model="item.checked"
                @change="onChange"
              >{{item.text}}</el-checkbox>
            </div>
          </div>
        </el-tree>
      </div>
    </div>
  </div>
</template>
<script>
let id = 1000

export default {
  data () {
    return {
      checked: false,
      tree: [
        {
          id: 1,
          label: '广东',
          actions: [{ text: '查询', value: 'Search', checked: false }],
          pid: 0
        },
        {
          id: 2,
          label: '广州',
          actions: [{ text: '查询', value: 'Search', checked: false }],
          pid: 1
        },
        {
          id: 3,
          label: '天河',
          actions: [{ text: '查询', value: 'Search', checked: false }],
          pid: 2
        },
        {
          id: 4,
          label: '白云',
          actions: [{ text: '查询', value: 'Search', checked: false }],
          pid: 2
        },
        {
          id: 5,
          label: '广西',
          actions: [{ text: '查询', value: 'Search', checked: false }],
          pid: 0
        },
        {
          id: 6,
          label: '玉林',
          actions: [{ text: '查询', value: 'Search', checked: false }],
          pid: 5
        },
        {
          id: 7,
          label: '北流',
          actions: [{ text: '查询', value: 'Search', checked: false }],
          pid: 6
        },
        {
          id: 8,
          label: '深圳',
          actions: [{ text: '查询', value: 'Search', checked: false }],
          pid: 1
        },
        {
          id: 9,
          label: '东莞',
          actions: [{ text: '查询', value: 'Search', checked: false }],
          pid: 1
        },
        {
          id: 10,
          label: '松山湖',
          actions: [{ text: '查询', value: 'Search', checked: false },
            { text: '导入', value: 'Search', checked: true }],
          pid: 9
        }
      ],
      data: []
    }
  },
  created () {
    let root = {
      id: 0,
      label: '树形菜单',
      lv: 0,
      actions: [{ text: '查询', value: 'Search', checked: false }]
    }
    this.menuFn(0, root)
    this.data = root.children
    // this.$set()
    console.log(root)
  },
  methods: {
    // https://www.cnblogs.com/vipsoft/p/4343493.html
    menuFn (id, data) {
      this.tree.forEach(x => {
        if (x.pid === id) {
          x.lv = data.lv + 1
          if (!data.children) data.children = []
          data.children.push(x)
          this.menuFn(x.id, x)
        }
      })
    },
    leftCheckChange (node, selected) {
      node.actions.forEach((x, index) => {
        //  x.checked = selected;
        this.$set(x, 'checked', selected)
      })
    },
    onChange () {
      this.$message('xxx')
    },
    append (data) {
      const newChild = { id: id++, label: 'testtest', children: [] }
      if (!data.children) {
        this.$set(data, 'children', [])
      }
      data.children.push(newChild)
    },

    remove (node, data) {
      const parent = node.parent
      const children = parent.data.children || parent.data
      const index = children.findIndex(d => d.id === data.id)
      children.splice(index, 1)
    },

    renderContent (h, { node, data, store }) {
      return (
        <span class="custom-tree-node">
          <span>{node.label}ppp </span>
          <span>
            <el-checkbox checked="checked">备选项</el-checkbox>
          </span>
        </span>
      )
    }
  }
}
</script>

<style scoped>
.t-tree {
  padding: 100px;
}
.action-group {
  width: 100%;
  display: flex;
}
.action-text {
  /* width: 200px; */
  margin-right: 10px;
}
.action-item {
  flex: 1;
}
.action-item > label {
  width: 80px;
}
</style>
